<template>
  <!--: 数据量过大，过滤改为后端实现 filter-option="filterOption"  option-filter-prop="children"-->
  <a-select
    show-search
    :placeholder="placeholder ? placeholder : $t('vehicleModel')"
    @search="getData"
    :allow-clear="clear"
    :mode="mode"
    :disabled="disabled"
    :filterOption="false"
    :maxTagCount="maxTagCount"
    :defaultActiveFirstOption="false"
    v-model="selectedValue"
    :getPopupContainer="getPopupContainerWrapper"
  >
    <a-select-option v-for="item in modelOptions" :key="item.id" :value="item.code" :title="item.showName">
      {{ item.showName }}
    </a-select-option>
  </a-select>
</template>
<script>
  // 所有车型(车型代码、车型名称)列表
  import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
  import modelApi from '@/api/modules/system/modelMana'
  import lodash from 'lodash'

  export default {
    components: {
      CommonSelect
    },
    props: {
      getPopupContainer: {
        type: Function,
        default: undefined
      },
      placeholder: {
        type: String,
        default: ''
      },
      mode: {
        type: String,
        default: 'default'
      },
      defaultValue: {
        type: [String, Array, Object, undefined],
        default () {
          return undefined
        }
      },
      query: {
        type: Object,
        default () {
          return null
        }
      },
      hasAll: {
        type: Boolean,
        default: true
      },
      maxTagCount: {
        type: Number,
        default: 1
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clear: {
        type: Boolean,
        default: false
      }
    },
    model: {
      prop: "defaultValue", //绑定的值，通过父组件传递
      event: "change" //自定义事件名
    },
    computed: {
      selectedValue:{
        get() {
          return this.defaultValue;
        },
        set(val) {
          this.$emit('change', val);    // 触发
          this.changeOption(val)
        }
      }
    },
    data () {
      return {
        modelOptions: []
      }
    },
    watch: {
      selectedValue (val) {
        this.getData('')
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getPopupContainerWrapper (triggerNode) {
        if (this.getPopupContainer) {
          return this.getPopupContainer(triggerNode);
        }
        if (!this.appendToBody && triggerNode) {
          return triggerNode.parentNode
        } else {
          return window.document.body
        }
      },
      getData:lodash.debounce(function(value = '') {
        value = Array.isArray(value) ? '': value
          modelApi.getMyAllModelCode({...this.query,searchWord: value}).then((res) => {
            let data = res.data
            if (!data) {
              return
            }
            data = data.map(item => {
              let showName = item.code
              showName += (item.name ? '[' + item.name + ']' : '')
              // 加code与trimLevel是为了有些地方选择的时候需要这两个参数
              return {
                id: item.code,
                ...item,
                showName,
                code: item.code,
                title: item.name
              }
            })
            this.modelOptions = this.hasAll ? [
              {
                id: '',
                name: this.$t('all')
              }
            ].concat(data) : data
          })
        },500),
      // },
      changeOption (val) {
        let item = this.modelOptions.find(e => e.code === val);
        this.$emit('changeoption', val, item);
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    }
  }
</script>
